<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>{$title}</title>
  <meta name="keywords" content="{$keywords}">
  <meta name="description" content="{$description}">
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  <link rel="shortcut icon" href="__PUBLIC__/favicon.ico">
  <link rel="stylesheet" href="__ASSET__/Home/active/luckuybox/css/swiper.min.css" type="text/css" />
  <link rel="stylesheet" href="__ASSET__/Home/active/luckuybox/css/animate.min.css" type="text/css" />
  <link rel="stylesheet" href="__ASSET__/Home/active/luckuybox/css/mobile_window.css" type="text/css" />
  <link rel="stylesheet" href="__ASSET__/Home/active/luckuybox/css/sport_11.css?v=1.0" type="text/css" />
  <script type="text/javascript">
        var mobileDevice = /iphone|ipod|ipad|Windows Phone|android|mobile/i;
        if(!(mobileDevice.test(navigator.userAgent.toLowerCase()))){
            location.href = "{:C('LOCAL_DOMAIN')}/active/luckybox";
        }
        {:C('GLOBAL_BDHM')}
        (function() {
            var baseFontSize = 100;
            var baseWidth = 320;
            var clientWidth = document.documentElement.clientWidth || window.innerWidth;
            var innerWidth = Math.max(Math.min(clientWidth, 480), 320);
            var rem = 100;
            if (innerWidth > 362 && innerWidth <= 375) {
                rem = Math.floor(innerWidth / baseWidth * baseFontSize * 0.9);
            }
            if (innerWidth > 375) {
                rem = Math.floor(innerWidth / baseWidth * baseFontSize * 0.84);
            }
            window.__baseREM = rem;
            document.querySelector('html').style.fontSize = rem + 'px';
    }());
    </script>    
    <style>
       .swiper-container{
         background-image:#fff;
         background-size: cover;
       }

       html, body {
          font-family: "Microsoft Yahei", "Hiragino Sans GB", Helvetica, "Helvetica Neue", "微软雅黑", Tahoma, Arial, sans-serif;
          position: relative;
          height: 100%;
         
      }
      body{
          -webkit-overflow-scrolling:touch; 
          overflow-scrolling: touch;
          max-width:640px;
          margin:0 auto;
      }
      *{
          margin:0;
          padding:0;
      }
      ul li{
          list-style:none;
      }
      .swiper-container {
          width: 100%;
          height: 100%;
      }
      .swiper-wrapper {
         display:none;
      }
      .swiper-pagination-bullet-active{
            background:#ffe13e;
      }
      .mobile_prize_area{
         width:74%;
         left:50%;
         top:5%;
         margin-left:-37%;
         background:rgba(0,0,0,0.2);
         border-radius:5px;
         -webkit-border-radius:5px;
         height:42px;
         overflow:hidden;
         position:absolute;
         display:none;
      }
      .mobile_prize_innerarea{
          height:36px;
          width:94.8%;
          margin-left:5px;
          margin-top:3px;
          overflow:hidden;
          position:relative;
      }
      .mobile_prize_area ul{
          position:absolute;
          left:5px;
          top:0px;
      }
      .mobile_prize_area ul li{
          color:#fff;
          font-size:0.135rem;
          height:36px;
      }
    </style>
</head>
<body>
	 <!-- Swiper -->
    <div class="swiper-container" >
        <div class="swiper-wrapper">
            <div class="swiper-slide sport_page1 relative">
                <div class="page1_src_1 opacitychange" ></div>
                <div class="page1_src_2 opacitychange"></div>
                <div class="page1_src_3 ani" swiper-animate-effect="bounceIn"  swiper-animate-duration='0.6s'></div>
                <div class="page1_src_4 ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration='0.3s' swiper-animate-delay="0.6s"></div>
                <div class="page1_src_5" swiper-animate-effect="bounceIn" swiper-animate-duration='0.5s' swiper-animate-delay="0.4s"></div>
                <div class="page1_src_6 ani" swiper-animate-effect="bounceIn" swiper-animate-duration='0.5s' swiper-animate-delay="0.8s"></div>
                <div class="page1_src_7 ani" swiper-animate-effect="bounceIn" swiper-animate-duration='0.5s' swiper-animate-delay="0.6s"></div>
                <div class="page1_src_8 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration='0.8s'  swiper-animate-delay="0.6s"></div>
                <div class="page1_src_m_9 ani"  swiper-animate-effect="fadeIn" swiper-animate-duration='0.6s' swiper-animate-delay="1s"></div>
                <a  href="{:C('ACTIVE_LUCKYBOX_THREADS', null, 'ly66play://66play')}" class="active_soprt ani" swiper-animate-effect="bounceIn" swiper-animate-duration='0.6s'  swiper-animate-delay="1.2s" onclick="show_popup(1)">参与活动</a>
                <div class="bottom_icon"></div>
            </div>
            <div class="swiper-slide sport_page2 relative"  style="overflow:hidden;">
                <div class="page1_src_1 page2_src_1 opacitychange"></div>
                <div class="page1_src_2 page2_src_2 opacitychange"></div>
                <div class="page1_src_3 page2_src_3 ani" swiper-animate-effect="bounceIn" swiper-animate-duration='0.3s'></div>
                <div class="page2_src_4 picAnimation ani"  swiper-animate-effect="bounceIn" swiper-animate-duration='1s' swiper-animate-delay="1s"  swiper-animate-iteration="infinite"></div>
                <div class="page2_src_5 picAnimation ani"     swiper-animate-effect="bounceIn" swiper-animate-duration='0.9s' swiper-animate-delay="0.8s"  swiper-animate-iteration="infinite"></div>
                <div class="page2_src_5 page2_src_m_5 picAnimation ani"     swiper-animate-effect="bounceIn" swiper-animate-duration='0.9s' swiper-animate-delay="1.1s"  swiper-animate-iteration="infinite"></div>
                <div class="page2_src_4 page2_src_m_4 picAnimation ani"  swiper-animate-effect="bounceIn" swiper-animate-duration='1s' swiper-animate-delay="1.3s"  swiper-animate-iteration="infinite"></div>
                <div class="page2_src_6 ani "  swiper-animate-effect="bounceInDown" swiper-animate-duration='0.5s' swiper-animate-delay="0.2s"></div>
                <div class="page2_src_7 ani"    swiper-animate-effect="bounceIn"  swiper-animate-delay="0.5s"></div>
                <div class="page2_src_8 ani"    swiper-animate-effect="bounceIn" swiper-animate-duration='0.6s' swiper-animate-delay="0.6s">
                     <p>在“11.11光棍节”当天，App中会</p>
                     <p>不定时出现宝箱哦，除了神秘礼品，</p>
                     <p>更有海量萌妹等你抱回家！</p>
                </div>
                <div class="page2_src_9 ani"    swiper-animate-effect="fadeIn" swiper-animate-duration='.6s' swiper-animate-delay=".4s"></div>
                <a class="page2_src_10 ani"  href="{:C('ACTIVE_LUCKYBOX_THREADS', null, 'ly66play://66play')}" swiper-animate-effect="bounceIn" swiper-animate-duration='0.6s'  swiper-animate-delay="1.2s" onclick="show_popup(2)"></a>
                <div class="bottom_icon"></div>
                <div class="mobile_prize_area">
                    <div class="mobile_prize_innerarea">
                       <ul  class="ul_1"></ul>
                   </div>
                </div>
            </div>
            <div class="swiper-slide sport_page3 relative">
                 <div class="page1_src_1 page3_src_1 ani" swiper-animate-effect="fadeIn" swiper-animate-duration='1s'></div>
                 <div class="page1_src_2 page3_src_2 ani" swiper-animate-effect="fadeIn" swiper-animate-duration='1s'></div>
                 <div class="page1_src_3 page3_src_3 ani" swiper-animate-effect="bounceIn" swiper-animate-duration='0.6s'></div>
                 <div class="page3_src_4 ani" swiper-animate-effect="bounceIn" swiper-animate-duration='0.6s' swiper-animate-delay="0.3s"></div>
                 <div class="page3_src_5 ani" swiper-animate-effect="bounceIn" swiper-animate-duration='0.6s' swiper-animate-delay="0.6s"></div>
                 <div class="page3_src_6 ani"  swiper-animate-effect="bounceInLeft" swiper-animate-duration='0.3s' swiper-animate-delay="0.6s"></div>
                 <div class="page3_src_7 ani" swiper-animate-effect="zoomInDown"  swiper-animate-duration='1s'  swiper-animate-delay="0.8s"></div>
                 <div class="page3_src_8 ani" swiper-animate-effect="bounceInRight" swiper-animate-duration='1.2s'  swiper-animate-delay="0.8s">
                      <p>来吧，单身狗们录制你的专属光棍节游戏瞬间，</p>
                      <p>分享给我们，不管是寂寞如雪的独自单排，还是</p>
                      <p>拉上基友一起派发狗粮，一起上镜show一把！</p>
                      <p>没错，66play工具正式支持摄像头录制啦~不要</p>
                      <p>愧对你表情帝的称号，或者证明给大家，我真的</p>
                      <p>不是单身狗！同样支持安卓手机录制。</p>
                 </div> 
                 <div class="bottom_icon"></div>
            </div>
            <div class="swiper-slide sport_page4">
                 <div class="page1_src_1 page4_src_1 ani" swiper-animate-effect="fadeIn" swiper-animate-duration='1s'></div>
                 <div class="page1_src_2 page4_src_2 ani" swiper-animate-effect="fadeIn" swiper-animate-duration='1s'></div>
                 <div class="page1_src_3 page4_src_3 ani" swiper-animate-effect="bounceIn" swiper-animate-duration='0.6s'></div>
                 <div class="page3_src_4 page4_src_4 ani" swiper-animate-effect="bounceIn" swiper-animate-duration='0.6s' swiper-animate-delay="0.3s"></div>
                 <div class="page3_src_5 ani" swiper-animate-effect="bounceIn" swiper-animate-duration='1s' swiper-animate-delay="0.6s"></div>
                 <div class="page3_src_6 page4_src_6 ani"  swiper-animate-effect="bounceInLeft" swiper-animate-duration='0.4s' swiper-animate-delay="0.6s"></div>
                 <div class="page3_src_7 page4_src_5 ani" swiper-animate-effect="zoomInDown"  swiper-animate-duration='1s'  swiper-animate-delay="0.8s"></div>
                 <div class="page3_src_8 page4_src_8 ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration='1.2s'  swiper-animate-delay="0.8s">
                      <p>11.11将会有一大~波~萌妹在66play平台内</p>
                      <p>准备了满满的诚意给大家，各种御姐萝莉真情</p>
                      <p>拉上基友一起派发狗粮，一起上镜show一把！</p>
                      <p>出镜派发好礼！光棍节不怕寂寞，记得一定要</p>
                      <p>来，别让妹子们白等哦~</p>
                 </div> 
                 <a  href="{:C('ACTIVE_LUCKYBOX_THREADS', null, 'ly66play://66play')}" class="active_soprt active_soprt_1 ani" swiper-animate-effect="bounceIn" swiper-animate-duration='0.6s'  swiper-animate-delay="1.2s" onclick="show_popup(4)">参与活动</a>
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
  <div  id="myPopup" class="ui-content usepop back_white">
          <p class="ui-content-p">您还没有下载APP哦~本功能需要安装66Play APP之后才能使用。快来下载吧</p>
          <div class="btncolum display-box">
            <button class="box-flexo cancel ui-btn ui-shadow ui-corner-all" onclick="hid()">取消下载</button>
            <button class="box-flexo ok ui-btn ui-shadow ui-corner-all" onclick="download()">立即下载</button>
          </div>
  </div>
  <div class="popbg"></div>
  <script src="__ASSET__/Home/active/luckuybox/js/swiper.min.js"></script>
	<script src="__ASSET__/Home/active/luckuybox/js/zepto.min.js"></script>
	<script src="__ASSET__/Home/active/luckuybox/js/swiper.animate.min.js"></script>
  <script src="__ASSET__/Home/active/luckuybox/js/fx.js"></script>
	<script>
      var matchDevice = /iphone|ipod|ipad/i;
      var mySwiper;
      document.onreadystatechange = function() {
             $(".swiper-wrapper").show();
      }
      window._THIS = {
            android_url : "{:C('LOCAL_DOMAIN')}/download/android",
            ios_url : "{:C('LOCAL_DOMAIN')}/download/ios"
      }
      function download() {
          if((matchDevice.test(navigator.userAgent.toLowerCase()))){
              location.href = window._THIS.ios_url;
              device = 'iOS';
          } else {
              location.href = window._THIS.android_url;
              device = 'Android';
          }
          _hmt.push(['_trackEvent', '光棍节活动-MOBILE-下载', device]);
      }
      $(function(){
            fixPageHeight();
            window.onresize = fixPageHeight;
            function fixPageHeight() {
              $("body, .swiper-container").height(window.innerHeight); //修正整数页面高度 
              return "page has been resized!";
            }
            swiper = new Swiper('.swiper-container', {
                            pagination: '.swiper-pagination',
                            paginationClickable:false,
                            direction: 'vertical',
                            onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
                              swiperAnimateCache(swiper); //隐藏动画元素 
                              swiperAnimate(swiper); //初始化完成开始动画
                            }, 
                            onSlideChangeEnd: function(swiper){ 
                              if(swiper.activeIndex==1){
                                       t=setInterval(function(){
                                           picAnimation();
                                       },2000)
                                    if(load_data==true){
                                        t2=setInterval(function (){
                                            slideUp()
                                        },4000)
                                    }
                                }else{
                                     $(".picAnimation").removeClass('pulse  animated');
                                     clearInterval(t);
                                     clearInterval(t2);

                              }
                              swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
                            },
                            onTransitionEnd: function(swiper){
                             swiperAnimate(swiper);
                           }
         });
      })
      $(function(){
             $.get('{:C('LOCAL_DOMAIN')}/active/luckybox/winner', function(data) {
                      if (data.state == 0) {
                        if(data.data.html !=""){
                              $('.mobile_prize_innerarea ul').append(data.data.html);
                              $('.mobile_prize_area').show();
                              load_data=true;
                            }
                        }else{
                             $(".mobile_prize_area").remove();
                        }
            });
      })
     var load_data=false;
     function   slideUp () {
           $(".ul_1").animate({"margin-top":"-36px"},200,function(){
                 $(this).css("margin-top" , "0").children().eq(0).appendTo($(this));
           })
     }
     function  show_popup (index) {
             var popup_w=$("#myPopup").width();
             var popup_h=$("#myPopup").height();
             $("#myPopup").show();
             $(".popbg").css({"height":$(window).height()}).show();
             _hmt.push(['_trackEvent', '光棍节活动-MOBILE', '第'+index+'页']);
     }
     function  hid () {
           $("#myPopup").hide();
           $(".popbg").hide();
     }
     function  picAnimation () {
         $(".picAnimation").removeClass('bounceIn  animated');
         var pic_len=$(".picAnimation").length;
         var pic_index=Math.floor(Math.random()*pic_len);
         $(".picAnimation").eq(pic_index).addClass('pulse  animated').
             one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
              $(".picAnimation").removeClass('pulse  animated');
        });
     }
    </script>
</body>
</html>